<!-- 
 * 成果对接记录
 * @author: 
 * @since: 2022-10-19
 * demandHistory.vue
-->
<template>
  <div class="container">
    <div class="search">
      <Filters :formModel="state.formModel" :formLabel="state.formLabel" @reset="reset" @filter="filter"></Filters>
    </div>
    <div class="table">
      <TableCom :tableHeader="state.tableHeader" :tableData="state.tableData" @getCurrentChange="getCurrentChange" @refresh="getHistoryList()" :pagination="state.pagination" :loading="loading" @getSizeChange="getSizeChange" @colSelect="colSelect" :isShowGrooveHandleCol="false" :isShowCheckbox="false" @emitArrayEvent="emitArrayCom" @comEvent="goDetail"></TableCom>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, reactive, ref } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { getHistoryListApi } from '@/api/interface/match.js'
import { sessionstorage } from '@/utils/storage.js'
const store = useStore();
const router = useRouter();

//区域加载
const loading = ref(true)

const state = reactive({
  achievementItem: {},
  formModel: {//科技政策搜索列表的参数
    time: [],
    startDate: '',//发布开始日期
    endDate: '',//发布结束日期
    status: ''
  },
  formLabel: [
    {
      label: '对接时间',
      model: "time",
      type: "dateRange",
      width: '360',
      option: [],
    },
    {
      label: '对接状态',
      model: "status",
      type: "select",
      width: '160',
      option: [
        {
          key: '全部',
          value: ''
        },
        {
          key: '对接成功',
          value: 'JOIN_OK'
        },
        {
          key: '对接失败',
          value: 'OFF'
        },
      ],
    },

  ],
  tableData: [],
  tableHeader: [
    {
      label: '成果方',
      prop: "needTitle",
      isLink: true,
      function: 'goDetail'
    },
    {
      label: '需求供给方',
      prop: "system",
      isArray: true,
    },
    {
      label: '对接状态',
      prop: "matchStateTypeName",
    },
    {
      label: '对接时间',
      prop: "joinDate",
    },
    {
      label: '取消原因',
      prop: "offCause",
    },

  ],
  pagination: {//分页
    currentPage: 1,
    size: 10,
    total: 0,
  },
})

onMounted(() => {
  state.achievementItem = sessionstorage.get('achievementItem')
  const level = router.currentRoute.value.meta.level
  store.dispatch('setting/setRouterCut', level);
  getHistoryList()
})

onUnmounted(() => {
  store.dispatch('setting/setRouterCut', 2);
})

const goDetail = (e, data) => {
  router.push({ name: 'AchieveDetail', params: { id: data.needId, type: "detail" } })
}
//点击每一行的数组中的单条数据
const emitArrayCom = (data) => {
  router.push({ name: 'NeedDetail', params: { id: data.id, type: "detail" } })

}
//获取历史数据
const getHistoryList = () => {
  let time = {}
  if (state.formModel.time.length > 0) {
    const [startDate, endDate] = state.formModel.time
    time.startDate = startDate
    time.endDate = endDate
  }
  const params = {
    needId: state.achievementItem.id,
    matchStateType: state.formModel.status,
    startDate: time.startDate,
    endDate: time.endDate
  }
  getHistoryListApi(params).then(res => {
    const { status, data } = res
    if (status === 200) {
      loading.value = false
      state.tableData = data.map(item => ({
        ...item,
        patentList: item.patent.map(val => val.title).join(','),
        systemList: item.system.map(val => val.title).join(','),
      }))
    }

  })

}


//表格筛选列---取消全选
const colSelect = (data, type, e, currentItem) => {
  if (type === 'filter') {
    const currentData = colFilters(data, e, currentItem, state.tableHeader)
    state.tableHeader = currentData;
  } else {//全选/全取消
    state.tableHeader = data;
  }
}
//搜索
const filter = () => {
  getHistoryList()
}
//重置
const reset = () => {
  for (let key in state.formModel) {
    state.formModel[key] = ''
  }
  getHistoryList()
}

//点击当前页
const getCurrentChange = (val) => {
  state.pagination.currentPage = val;
  getHistoryList()
}

//点击条数
const getSizeChange = (val) => {
  state.pagination.size = val;
  getHistoryList()
}


</script>

<style lang="scss" scoped></style>
